<template>
  <div>
    <div class="handle-box">
      <el-button type="primary" class="handle-del mr10" @click="addClick">新增题目</el-button>
      <el-select class="mr10" v-model="query.type" placeholder="请选择题目类型">
        <el-option label="全部题目" value=""></el-option>
        <el-option label="单选题" value="1"></el-option>
        <el-option label="判断题" value="2"></el-option>
        <el-option label="简单题" value="3"></el-option>
      </el-select>
      <el-select class="mr10" v-model="query.classVal" placeholder="请选择所属分类">
        <el-option label="全部分类" value=""></el-option>
        <el-option label="信用贷" value="1"></el-option>
        <el-option label="车贷" value="2"></el-option>
        <el-option label="房贷" value="3"></el-option>
        <el-option label="企业贷" value="4"></el-option>
        <el-option label="税贷" value="5"></el-option>
      </el-select>
      <el-input v-model="query.kw" placeholder="请输入课程名称/创建人进行搜索" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
    </div>
    <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" :index="tableIndex" label="序号" align="center" width="55"></el-table-column>
      <el-table-column prop="title" label="题目名称"></el-table-column>
      <el-table-column prop="type" label="题目类型">
        <template slot-scope="scope">
          <el-tag size="mini">单选题</el-tag>
          <el-tag size="mini" type="success">判断题</el-tag>
          <el-tag size="mini" type="warning">简答题</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="da" label="参考答案"></el-table-column>
      <el-table-column prop="userName" label="创建人"></el-table-column>
      <el-table-column prop="userName" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row.id)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.total"
                     :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
      </el-pagination>
    </div>
    <!-- 新增编辑 -->
    <el-dialog title="题目内容" :visible.sync="tiFlg" width="40%">
      <el-form ref="rulesForm" :rules="rules" :model="tiForm" label-width="80px">
        <el-form-item label="所属分类" prop="name">
          <el-radio-group v-model="tiForm.classVal">
            <el-radio label="1">信用贷</el-radio>
            <el-radio label="2">车贷</el-radio>
            <el-radio label="3">房贷</el-radio>
            <el-radio label="4">企业贷</el-radio>
            <el-radio label="5">税贷</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目名称" prop="name">
          <el-input v-model="tiForm.name"></el-input>
        </el-form-item>
        <el-form-item label="" prop="name" :style="{display:'flex'}">
          <el-image v-for="i in 3" style="width: 100px; height: 100px;marginRight:10px;"
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"
                    :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"></el-image>
          <el-upload class="upload-demo" action="#" :before-upload="fileChange">
            <el-button size="small" type="primary">点击上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="题目类型" prop="name">
          <el-radio-group v-model="tiForm.type">
            <el-radio label="1">单选题</el-radio>
            <el-radio label="2">判断题</el-radio>
            <el-radio label="3">简答题</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="tiForm.type == '1'">
          <el-form-item label="选项A" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-image style="width: 100px; height: 100px;marginRight:10px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"
                      :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"></el-image>
            <el-upload class="upload-demo" action="#" :before-upload="fileChange">
              <el-button size="small" type="primary">点击上传图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="选项B" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-image style="width: 100px; height: 100px;marginRight:10px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"
                      :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"></el-image>
            <el-upload class="upload-demo" action="#" :before-upload="fileChange">
              <el-button size="small" type="primary">点击上传图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="选项C" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-image style="width: 100px; height: 100px;marginRight:10px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"
                      :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"></el-image>
            <el-upload class="upload-demo" action="#" :before-upload="fileChange">
              <el-button size="small" type="primary">点击上传图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="选项D" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="" prop="name">
            <el-image style="width: 100px; height: 100px;marginRight:10px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"
                      :preview-src-list="['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']"></el-image>
            <el-upload class="upload-demo" action="#" :before-upload="fileChange">
              <el-button size="small" type="primary">点击上传图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="正确选项" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="说明" prop="name">
            <el-input type="textarea" autosize v-model="tiForm.name"></el-input>
          </el-form-item>
        </template>
        <template v-if="tiForm.type == '2'">
          <el-form-item label="正确选项" prop="name">
            <el-input v-model="tiForm.name"></el-input>
          </el-form-item>
          <el-form-item label="说明" prop="name">
            <el-input type="textarea" autosize v-model="tiForm.name"></el-input>
          </el-form-item>
        </template>
        <template v-if="tiForm.type == '3'">
          <el-form-item label="参考答案" prop="name">
            <el-input type="textarea" autosize v-model="tiForm.name"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tiFlg = false">取 消</el-button>
        <el-button type="primary" @click="tiFormClick" :loading="tiLoad">提交后继续新增</el-button>
        <el-button type="primary" @click="tiFormClick" :loading="tiLoad">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { RolePermissionsQX } from '../../../../api/index';

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        kw: '',
        total: 0
      },
      tableData: [
        {
          title: '一个人攻击你应该怎么办？',
          type: 1,
          da: 'A.用板凳呼他',
        }
      ],

      tiFlg: false,
      tiForm: {
        classVal: '1',
        name: '',
        type: '1',
      },
      rules: {

      },
      tiLoad: false
    }
  },
  methods: {
    //获取列表
    getList() {

    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getList();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getList();
    },
    //新增
    addClick() {
      this.tiFlg = true;
    },
    //编辑
    editClick() {
      this.tiFlg = true;
    },
    //删除
    delClick() {
      this.$confirm('确定删除该题吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch()
    },
    //提交
    tiFormClick() {

    }
  }
}
</script>
<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: red;
}
</style>
